<!-- 可拖动的播放器 -->
<template>
   <div v-show="show" id="dialog" :style="dialog.style">
     <div id="dragTitle" style="width: 100%;height: 32px;background-color: #2a2b2c;display: flex;flex-direction: row-reverse;align-items: center;cursor: move;">
       <Icon type="md-close" color="white" size="24" @click="close" style="cursor: pointer"/>

     </div>
     <RtcWithTalkPlayer :id="playerProperty.id"
                        :ref="playerProperty.ref"
                        :videoId="playerProperty.videoId"/>
   </div>
</template>
<script>
import RtcWithTalkPlayer from '@/view/Home/component/RtcWithTalkPlayer.vue';
export default {
  name: "DragRtcPlayer",
  components:{RtcWithTalkPlayer},
  data(){
    return{
      show:false,
      dialogForm:null,
      currentX:0,
      currentY:0,
      initialX:0,
      initialY:0,
      dialog:{
        style:{
          left:'100px',
          top:'100px',
          width:'800px',
          height:'500px'
        }
      },
      playerProperty:{
        id:1,
        ref:"rtcWithTalkPlayer1-1",
        videoId:'dispatchRtcPlayer1-1'
      },

      rtcPlayer:null

    }
  },
  methods:{
    isPlaying(){
      this.$refs["rtcWithTalkPlayer1-1"].isPlaying();
    },
    openDialog(deviceId,channelId,host,deviceName,errCallback){
      const _this = this;
      this.show=true;
      this.$nextTick(()=>{
        _this.rtcPlayer = this.$refs[this.playerProperty.ref];
        //console.log(_this.rtcPlayer)
        _this.dialogForm = document.getElementById('dialog');
        //console.log(window.innerWidth);
        const w = window.innerWidth*0.4;
        const h = w * 500/800;
        //console.log("%o/%o/%o",window.innerHeight,h,window.innerHeight - h);
        const t = (window.innerHeight - h)/2;
        const l = (window.innerWidth - w)/2;

        _this.dialog.style.left = l + 'px';
        _this.dialog.style.top = t + 'px';
        _this.dialog.style.width = w + 'px';
        _this.dialog.style.height = h + 'px';

        //console.log(_this.dialog);
        _this.dialogForm = document.getElementById('dialog');
        _this.dragTitle = document.getElementById('dragTitle');
        _this.dragTitle.addEventListener('mousedown', _this.handleMouseDown);
        _this.dragTitle.addEventListener('mouseup', _this.handleMouseUp);

        _this.rtcPlayer.openDialog(deviceId,channelId,host,deviceName,errCallback);
      });

    },
    handleMouseMove(event){
      //console.log("mousemove=%o,currentX=%o,currentY=%o",event,this.currentX,this.currentY);
      this.dialogForm.style.left = (event.clientX - this.currentX) + 'px';
      this.dialogForm.style.top = (event.clientY - this.currentY) + 'px';
    },
    handleMouseDown(event){
      console.log("mousedown=%o;style.top=%o",event,this.dialogForm.style.top);
      //active = true;
      this.currentX = event.clientX - parseInt(this.dialogForm.style.left, 10);
      this.currentY = event.clientY - parseInt(this.dialogForm.style.top, 10);
      this.initialX = event.clientX -  this.currentX;
      this.initialY = event.clientY -  this.currentY;

      document.addEventListener('mousemove',this.handleMouseMove);
    },

    handleMouseUp(event){
      console.log("mouseup");
      //active = false;
      document.removeEventListener('mousemove',this.handleMouseMove);
    },

    close(){
      //console.log("close");
      this.rtcPlayer.stop();
      if (!!this.dialogForm){
        this.dragTitle.removeEventListener('mousedown',this.handleMouseDown);
        this.dialogForm= null;
      }
      this.show=false;
    }
  },
  mounted() {
    const _this= this;
    this.$nextTick(()=>{
      _this.dialogForm = document.getElementById('dialog');
      _this.dragTitle = document.getElementById('dragTitle');
      _this.dragTitle.addEventListener('mousedown', _this.handleMouseDown);
      _this.dragTitle.addEventListener('mouseup', _this.handleMouseUp);
    });

  },
  beforeDestroy() {
    if (!!this.dialogForm){
      console.log("beforeDestroy");
      this.dragTitle.removeEventListener('mousedown',this.handleMouseDown);
      this.dialogForm= null;
    }
  }
}
</script>
<style lang="less">
#dialog{
  width: 42%;
  height: 55%;
  background-color: #00060c;
  position: absolute;

  //left: 100px;
  //top:100px
}
</style>
